<template>
  <section class="contactUs">
    <p class="contactUs-title">公司地址</p>
    <div class="map" id="map">
      <div class="sample" ref="sample">
        <div class="info">
          <p>{{BDMapInfo.address}}</p>
          <p @click="goTo" ref="btn">点击查看</p>
        </div>
      </div>
    </div>
    <ul>
      <li>
        <img src="@/assets/images/aboutUs/Frame(2).jpg" class="img" lazy-load />
        <p>
          <span>0755-23322262</span>
          <span>官方咨询热线</span>
        </p>
      </li>
      <li>
        <img src="@/assets/images/aboutUs/Frame(1).jpg" class="img" lazy-load />
        <p>
          <span>irs@iriencesz.com</span>
          <span>官方邮箱号</span>
        </p>
      </li>
      <li>
        <img src="@/assets/images/aboutUs/Frame.jpg" class="img" lazy-load />
        <p>
          <span>广东深圳宝安金港中心B座12楼</span>
          <span>深圳总部地址</span>
        </p>
      </li>
    </ul>
  </section>
</template>

<script lang="ts" setup>
import BMap from 'BMap'
import { onMounted, reactive, Ref, ref } from 'vue'
const BDMapInfo = reactive({
  longitude: 113.87125670277808,
  latitude: 22.55938375457438,
  title: '金港商务大厦',
  address: '广东深圳宝安金港中心B座12楼',
})
const sample: Ref<HTMLElement | null> = ref(null)
const btn: Ref<HTMLElement | null> = ref(null)
const init = () => {
  let map = new BMap.Map('map')
  const point = new BMap.Point(BDMapInfo.longitude, BDMapInfo.latitude)
  map.centerAndZoom(point, 15)
  const marker = new BMap.Marker(point)
  map.addOverlay(marker)
  map.getPanes().mapPane.appendChild(sample.value)
  // TODO: 触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动，但是可以触发拖动事件。
  map.addEventListener('touchmove', () => {
    map.enableDragging()
  })
  // TODO: 触摸结束时触发次此事件  此时开启禁止拖动
  map.addEventListener('touchend', () => {
    map.disableDragging()
  })

  // 初始化地图 禁止拖动   注：虽禁止拖动，但是可以出发拖动事件
  // map.disableDragging()
}
const goTo = () => {
  window.open(
    `http://api.map.baidu.com/marker?location=${BDMapInfo.latitude},${BDMapInfo.longitude}&title=我的位置&content=${BDMapInfo.title}&output=html&src=webapp.baidu.openAPIdemo`
  )
}
onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.contactUs {
  padding: 0 24px;
  &-title {
    font-size: 44px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #2087e3;
    margin: 60px 0;
  }
  .map {
    width: 100%;
    height: 440px;
    font-size: 28px !important;
    .sample {
      width: 400px;
    }
    .info {
      padding: 20px;
      background-color: #fff;
      font-size: 24px;
      p {
        &:last-child {
          margin: 20px auto 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          padding: 10px 0;
          background-color: #2087e3;
          color: #fff;
        }
      }
    }
  }
  ul {
    li {
      display: flex;
      margin-top: 40px;
      img {
        width: 78px;
        height: 78px;
      }
      p {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 42px;
      }
    }
  }
}
</style>